<script setup>
	import {ref} from 'vue';
	import {askUserAPI} from '@/apis/login';
	import {uesDocInfoStore} from '@/stores';
	import {orderPaymentAPI,orderPreAPI, paymentAPI} from '@/apis/home';
	// import {storeToRefs} from 'pinia';
	const docStore = uesDocInfoStore()
	// const { fromdata }=storeToRefs(docStore)
	// 声明一下为什么又写async/await 又写点then 纯属随意随心
	
	
	
	
	// paymentComp组件
	const payCompRef=ref()
	
	// 用户患者信息
	const userpayment = ref({})
	async function getaskUser() {
		const res = await askUserAPI(docStore.userID)
		console.log('用户患者信息',res);
		userpayment.value = res.data
	}

	// 生成预付订单
	const Order = ref({})
	function getorder() {
		orderPreAPI(docStore.type).then((res) => {
			// console.log(res);
			Order.value = res.data
		})
	}
	// 因为后端需要图片id和URL地址所以要map一下添加id 然后再请求接口

	// console.log(docStore.fromdata.imgs);
	// 支付订单
	const OrderID=ref('') //订单id
	function payment() {
		uni.showLoading()
		if(OrderID.value !='') {
			return uni.showToast({
				title:'已有订单',
				icon:'none'
			})
		}

		docStore.fromdata.imgs = docStore.fromdata.imgs.map((item) => {
			return {
				url: item.url,
				id: item.uuid
			}
		})
		
		// 调用支付接口
		orderPaymentAPI({
			type: docStore.type,
			patientId: docStore.userID,
			illnessDesc: docStore.fromdata.TextareaValue,
			pictures: docStore.fromdata.imgs,
			illnessTime:docStore.fromdata.activeValu,
			consultFlag:docStore.fromdata.isValu
		}).then((res) => {
			// console.log(res);
			
		   OrderID.value=res.data.id
		   // 清空赋值
		   docStore.fromdata={...docStore.clear}
		   docStore.type=''
		   docStore.userID=''
		   docStore.depId=''
		   docStore.illnessType=''
		   // 打开支付方式
		  payCompRef.value.open()
		}).finally(()=>{
			uni.hideLoading()
		})
		OrderID.value=''
	}
   
   // 支付方式
   // const payindex=ref(0)
   // const channelpay=(e)=>{
	  //  console.log(e);
	  //  payindex.value=e
	   
   // }
   
    // 关闭支付方式
	const payclose=()=>{
		payCompRef.value.close()
	}
    // 确认支付
	// 支付账号  askgxl8276@sandbox.com  scobys4865@sandbox.com  密码六个1
   const paysubmit=({index})=>{
	   console.log('支付成功');
	   if(index==0){
		  return uni.showToast({
		   	title:'暂不支持微信支付',
			icon:'none'
		   })
	   }
	   paymentAPI({
		    paymentMethod:index,
			orderId:OrderID.value,
			payCallback:'http://localhost:5173/#/subpack_consult/room/index', //这个地址是支付完成后你返回自己小程序或者开发的app某个页面的地址
			}).then((res)=>{
				console.log(res);
			    // #ifdef H5
				   // 支付接口请求成功后端就返回一个跳转路径 引导你支付
				   window.location.href=res.data.payUrl
				// #endif
				
				// #ifdef MP-WEIXIN
				   //  引导你支付
				   wx.requestPayment({
					   //4个参数
				   })
				// #endif
				
			})
			
   }
	// 用户患者信息
	getaskUser()
	// 生成预付订单
	getorder()
</script>


<template>
	<scroll-page>
		<view class="payment-page">
			<uni-section title-font-size="32rpx" title-color="#121826" padding="30rpx" title="图文问诊">
				<uni-list :border="false">
					<uni-list-item title="极速问诊" note="自动分配医生" thumb="/static/images/ys.png" thumb-size="lg" />
					<!-- <uni-list-item title="优惠券" show-arrow /> -->
					<uni-list-item title="优惠券" show-arrow>
						<template #footer>
							<view class="uni-list-text-red">-¥{{Order.couponDeduction}}</view>
						</template>
					</uni-list-item>
					<uni-list-item title="积分抵扣">
						<template #footer>
							<view class="uni-list-text-red">-¥{{Order.pointDeduction}}</view>
						</template>
					</uni-list-item>
					<uni-list-item title="实付款">
						<template #footer>
							<view class="uni-list-text-red">¥{{Order.actualPayment}}</view>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>

			<view class="dividing-line"></view>

			<uni-section title-font-size="32rpx" title-color="#121826" padding="30rpx" title="患者资料">
				<uni-list :border="false">
					<uni-list-item title="患者信息">
						<template #footer>
							<view class="uni-list-text-gray">
								{{userpayment.name}} | {{userpayment.genderValue}} | {{userpayment.age}}岁
							</view>
						</template>
					</uni-list-item>
					<uni-list-item border title="病情描述" :note="docStore.fromdata.TextareaValue" />
				</uni-list>
			</uni-section>

			<!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
		</view>
		<!-- 下一步操作 -->
		<view class="next-step">
			<view class="total-amount">
				合计:
				<text class="number">¥{{Order.payment}}</text>
			</view>
			<button class="uni-button" @click='payment'>
				立即支付
			</button>
		</view>
	<button @click="payCompRef.open()">打开</button>
	</scroll-page>
<paymentComp ref="payCompRef" @payconfirm='paysubmit' @changepay='channelpay' @payclose='payclose' :amount='Order.payment' :orderID='OrderID'></paymentComp>
</template>

<style lang="scss">
	// subpkg_consult/payment/index.scss
	.payment-page {
		padding: 0 20rpx;
	}

	:deep(.uni-section-header) {
		font-weight: 500 !important;
		padding-left: 30rpx !important;
		padding-bottom: 0 !important;
	}

	:deep(.uni-section-content) {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	:deep(.uni-list-item__container) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	:deep(.uni-list-item__content-title) {
		font-size: 32rpx !important;
		color: #3c3e42 !important;
	}

	:deep(.uni-list-item__extra-text) {
		font-size: 32rpx !important;
		color: #3c3e42 !important;
	}

	:deep(.uni-list-item__content-note) {
		font-size: 28rpx !important;
	}

	:deep(.uni-list-item__icon) {
		margin-right: 0 !important;
	}

	:deep(.uni-icon-wrapper) {
		padding: 0 !important;
		margin-right: -10rpx !important;
		font-size: 36rpx !important;
	}

	.dividing-line {
		height: 30rpx;
		background-color: #f6f6f6;
	}

	.uni-list-text-red {
		color: #eb5757;
	}

	.uni-list-text-gray {
		color: #848484;
		font-size: 30rpx;
	}

	.payment-agreement {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 180rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;

		:deep(.uni-radio-input) {
			transform: scale(0.9);
			margin-right: 0 !important;
		}

		/* #ifndef MP */
		radio {
			transform: scale(0.7);
			margin-right: -5rpx !important;
		}

		/* #endif */
	}

	.next-step {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;

		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 30rpx 40rpx calc(env(safe-area-inset-bottom) + 30rpx);
		// padding-bottom: calc(env(safe-area-inset-bottom) + 30rpx);
		background-color: #fff;

		.uni-button {
			width: 400rpx;
		}

		.total-amount {
			flex: 1;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #3c3e42;
		}

		.number {
			font-size: 40rpx;
			color: #eb5757;
			margin-left: 10rpx;
		}
	}
</style>